<template>
  <border
    class="assets-handing"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="module-architecture">
        <div class="module-content-title">建筑资产处置</div>
        <div class="module-content-message">
          <message v-for="(item, index) in messageTop"
                   :key="index"
                   :messageName="item.messageName"
                   :messageNumber="item.messageNumber"
                   :messageUnit="item.messageUnit"></message>
        </div>
        <div class="chart">
          <bar-line ref="barLine"
                    :title="barLineConfigTop.title"
                    :axis="barLineConfigTop.axis"
                    :xAxis="barLineConfigTop.xAxis"
                    :yAxis="barLineConfigTop.yAxis"
                    :dataZoom="barLineConfigTop.dataZoom"
                    :grid="barLineConfigTop.grid"
                    :config="barLineConfigTop.config"
                    :tooltipsConfig="barLineConfigTop.tooltipsConfig"
                    :seriesData="barLineConfigTop.seriesData"></bar-line>
        </div>
      </div>
      <div class="module-land">
        <div class="module-content-title">土地资产处置</div>
        <div class="module-content-message">
          <message v-for="(item, index) in messageBottom"
                   :key="index"
                   :messageName="item.messageName"
                   :messageNumber="item.messageNumber"
                   :messageUnit="item.messageUnit"></message>
        </div>
        <div class="chart">
          <bar-line  ref="barLine1"
                     :title="barLineConfigBottom.title"
                    :axis="barLineConfigBottom.axis"
                    :xAxis="barLineConfigBottom.xAxis"
                    :yAxis="barLineConfigBottom.yAxis"
                    :dataZoom="barLineConfigBottom.dataZoom"
                    :grid="barLineConfigBottom.grid"
                    :config="barLineConfigBottom.config"
                    :tooltipsConfig="barLineConfigBottom.tooltipsConfig"
                    :seriesData="barLineConfigBottom.seriesData"></bar-line>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Message from './../components/Message.vue'
import BarLine from './../components/BarLine.vue'
export default {
  name: 'assetsHanding',
  components: {
    Border,
    Message,
    BarLine
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x2',
        icon: '',
        titleText: '资产处置概况',
        goPageUrl: ''
      },
      messageTop: [
        {
          messageName: '资产体量（㎡）',
          messageNumber: 0,
          messageUnit: ''
        },
        {
          messageName: '残值收入（万元）',
          messageNumber: 0,
          messageUnit: ''
        },
        {
          messageName: '处置费用（万元）',
          messageNumber: 0,
          messageUnit: ''
        }
      ],
      messageBottom: [
        {
          messageName: '资产体量（m²）',
          messageNumber: 0,
          messageUnit: ''
        },
        {
          messageName: '残值收入（万元）',
          messageNumber: 0,
          messageUnit: ''
        },
        {
          messageName: '处置费用（万元）',
          messageNumber: 0,
          messageUnit: ''
        }
      ],
      barLineConfigTop: {
        title: {
        },
        axis: {
          xAxisNameLength: 4,
          xAxisNameLengthSymbol: ''
        },
        dataZoom: {
          show: true,
          right: 10,
          endValue: 4
        },
        grid: {
          top: 40,
          bottom: 0
        },
        config: {
          barWidth: 20
        },
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: []
        },
        yAxis: {
        },
        tooltipsConfig: {
          tipsColor: ['#2e92cb']
        },
        seriesData: []
      },
      barLineConfigBottom: {
        title: {
        },
        axis: {
          xAxisNameLength: 4,
          xAxisNameLengthSymbol: ''
        },
        dataZoom: {
          show: true,
          right: 10,
          endValue: 4
        },
        grid: {
          top: 40,
          bottom: 0
        },
        config: {
          barWidth: 20
        },
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: []
        },
        yAxis: {
        },
        tooltipsConfig: {
          tipsColor: ['#2e92cb']
        },
        seriesData: []
      },
      apiData: ''
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.stockAssetsApi.getAssetsDisposalSituationList({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            this.apiData = res.data.data
            if (!isRefresh) {
              this.handleData()
            }
          } else {
            this.apiData = {}
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
        }, res => {
          this.apiData = {}
          this.$parent.showTips('请求失败，点击确认继续刷新')
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let dataZoomLength = window.screen.width > 1890 ? 6 : 4
      this.barLineConfigTop.dataZoom.endValue = dataZoomLength
      this.barLineConfigBottom.dataZoom.endValue = dataZoomLength
      this.messageTop[0].messageNumber = parseInt(data.buildAssetDisposalModeInf.assetVolume ? data.buildAssetDisposalModeInf.assetVolume : 0)
      this.messageTop[1].messageNumber = parseInt(data.buildAssetDisposalModeInf.residualIncome / 10000)
      this.messageTop[2].messageNumber = parseInt(data.buildAssetDisposalModeInf.disposalCost / 10000)
      this.messageBottom[0].messageNumber = parseInt(data.landAssetDisposalModeInf.assetVolume ? data.landAssetDisposalModeInf.assetVolume : 0)
      this.messageBottom[1].messageNumber = parseInt(data.landAssetDisposalModeInf.residualIncome / 10000)
      this.messageBottom[2].messageNumber = parseInt(data.landAssetDisposalModeInf.disposalCost / 10000)
      this.messageTop[0].messageName = data.buildAssetDisposalModeInf.assetVolumeUnit ? `资产体量（${data.buildAssetDisposalModeInf.assetVolumeUnit}）` : '资产体量（㎡）'
      this.messageBottom[0].messageName = data.landAssetDisposalModeInf.assetVolumeUnit ? `资产体量（${data.landAssetDisposalModeInf.assetVolumeUnit}）` : '资产体量（亩）'
      let buildData = []
      let buildXData = []
      data.buildAssetDisposalModeInf.assetDisposalModeList.forEach(item => {
        buildXData.push(item.assetDisposalModeName)
        buildData.push(parseInt(item.assetVolume))
      })
      if (buildXData.length > dataZoomLength) {
        this.barLineConfigTop.dataZoom.show = true
      } else {
        this.barLineConfigTop.dataZoom.show = false
      }
      this.barLineConfigTop.xAxis.data = buildXData
      this.barLineConfigTop.yAxis.max = buildData[0]
      this.barLineConfigTop.seriesData = [{
        data: buildData,
        name: '',
        colorIndex: 0,
        isBar: true
      }]
      let landData = []
      let landXData = []
      data.landAssetDisposalModeInf.assetDisposalModeList.forEach(item => {
        landXData.push(item.assetDisposalModeName)
        landData.push(parseInt(item.assetVolume))
      })
      if (landXData.length > dataZoomLength) {
        this.barLineConfigBottom.dataZoom.show = true
      } else {
        this.barLineConfigBottom.dataZoom.show = false
      }
      this.barLineConfigBottom.xAxis.data = landXData
      this.barLineConfigBottom.yAxis.max = landData[0]
      this.barLineConfigBottom.seriesData = [{
        data: landData,
        name: '',
        colorIndex: 0,
        isBar: true
      }]
    },
    resizeChart () {
      this.$refs.barLine.resizeChart()
      this.$refs.barLine1.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.assetsHandingTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.assetsHandingTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.assetsHandingTimer)
  }
}
</script>
<style lang="scss" scoped>
.assets-handing {
  .module-content {
    width: 100%;
    height: 100%;
    .module-architecture, .module-land {
      width: 100%;
      height: 50%;
      .module-content-title {
        font-size: 14px;
        line-height: 30px;
        color: #fff;
        text-align: left;
        padding-left: 30px;
      }
      .module-content-message {
        width: calc(100% - 24px);
        padding: 0 12px;
        overflow: hidden;
        .message {
          width: calc((100% - 30px) / 3);
          margin: 0 5px;
          float: left;
        }
      }
      .chart {
        width: 100%;
        height: 65%;
        padding-top: 10px;
        box-sizing: border-box;
      }
    }
  }
}
@media screen and (min-width: 1890px) {
  .assets-handing {
    .module-content {
      .module-architecture, .module-land {
        .module-content-title {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
